<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增账单')"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-bill-add">

        <div class="form-group">
            <label class="col-sm-3 control-label is-required">消费描述：</label>
            <div class="col-sm-5">
                <div class="radio">
                    <label class="check-box">
                        <input name="descriptionPrice" th:data-label="套餐1" type="checkbox" value=""
                               th:text="套餐1" required>
                    </label>

                    <!--  一个input用来控制数量  -->
                    <input onchange="numberChange()" value="0" type="number"
                           id="description"
                           name="description"
                           maxlength="3"
                           style="width: 50px" disabled> 次
                </div>
            </div>
        </div>
        <br>

        <br>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">支付方式：</label>
            <div class="col-sm-6">
                <label class="radio-box">
                    <input id="paymentMethod" name="paymentMethod" type="radio"
                           value="3" th:text="会员支付" checked>
                </label>
            </div>
        </div>
        <br>

        <br>
        <div class="form-group" id="my-customerId">
            <label class="col-sm-3 control-label is-required">会员卡号：</label>
            <select class="col-sm-6" name="customerId" id="customerId">
                <option value="">----请选择会员----</option>
            </select>
        </div>


        <div class="form-group" style="display: none">
            <div class="input-group m-b">
                <input name="keyOne" id="keyOne"/>
            </div>
        </div>

        <br>
        <br>
        <div class="form-group">
            <label class="col-sm-3 control-label"></label>
            <div class="col-sm-5">
                <button type="button" class="btn btn-w-m btn-primary" onclick="submitAddBill()">提交</button>
            </div>
        </div>
    </form>


</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-css"/>
<th:block th:include="include :: select2-js"/>

<script th:inline="javascript">
    var prefix = ctx + "custom/bill"
    var prefixMember = ctx + "custom/member"


    $("#form-bill-add").validate({
        focusCleanup: true
    });

    // 弹出检查
    function check(rs) {
        if (rs.code === 500) {
            $.modal.msgError("系统错误!,请联系管理员");
        } else if (rs.code === 0) {
            $.modal.msgSuccess("提交成功!");
            // 关闭选项卡
            $.modal.closeTab();
        } else {
            $.modal.msgWarning(rs.message);
        }
    }


    //提交表单
    function submitAddBill() {
        //判断是否选择套餐
        if ($('#description').val() === "" || parseFloat($('#description').val()) <= 0) {
            $.modal.msgWarning("请先选择套餐");
            return;
        }

        //判断是否选择会员
        if ($('#customerId').val() === "" || $('#customerId').val() === null) {
            $.modal.msgWarning("请先选择会员");
            return;
        }

        $.modal.confirm("确认提交?", function () {
            //提交
            // 打开遮罩层
            $.modal.loading("正在提交消费订单，请稍后...");
            $.operate.save(prefix + "/add", $('#form-bill-add').serialize(), function (rs) {
                // 关闭遮罩层
                $.modal.closeLoading();
                check(rs)
            });
        })

    }


    // 选择会员卡号模糊搜索
    $("#customerId").select2({
        ajax: {
            url: prefixMember + "/listByPhone",
            dataType: 'json',
            delay: 1000,
            data: function (params) {
                return {
                    phone: params.term,
                };
            },
            processResults: function (data) {
                var array = data.rows;
                // 使用map方法从数组中提取并只保留每个对象中的id和phone字段
                var idAndPhoneArray = array.map(function (item) {
                    return {
                        id: item.id,
                        text: item.phone + "--" + item.name + "--剩余" + item.balance + "次",
                    };
                });
                return {
                    results: idAndPhoneArray
                };
            },
            cache: true
        },
        placeholder: '请输入电话/名字搜索...',
        escapeMarkup: function (markup) {
            return markup;
        },
        minimumInputLength: 1,
    });


    // ifChecked 触发时机：选框选中时触发
    $("input[name = descriptionPrice]").on('ifChecked', function (obj) {
        var numberInput = $('#description');
        // 移除数量计数框的disabled属性并设置值为1（添加延迟）
        numberInput.prop('disabled', false);
        numberInput.val(1);
        // 触发数量计数框的change事件
        numberInput.trigger('change');
    })

    //数量框监听函数
    function numberChange() {
        // 变化之后就是一件事,修改订单备注
        var numberInput = $('#description');
        $('#keyOne').val("单次消费" + numberInput.val() + "次")
    }

    // ifUnchecked触发时机：选框取消选中时触发
    $("input[name = descriptionPrice]").on('ifUnchecked', function (obj) {
        //获取后面输入框,并改变状态
        var numberInput = $('#description');
        // 移除数量计数框的disabled属性并设置值为0
        numberInput.prop('disabled', true);
        numberInput.val(0);
        // 触发数量计数框的change事件
        numberInput.trigger('change');
    })


</script>
</body>
</html>